<!-- 组态运行功能测试 -->
<template>
  <div>
    <el-button  style="margin-top: 20px;"  @click="alarmdisplay" >报警显示</el-button>
    <el-button  style="margin-top: 20px;" @click="handle1" >测试功能1</el-button>

    <SelectRadio></SelectRadio>
    <SelectGraphic></SelectGraphic>

    <dlg-alarm-display :dialog-visible="visibleAlarm"    @res-alarm-display="resAlarmDisplay" ></dlg-alarm-display>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";
import DlgAlarmDisplay from "@/draw/statusbar/DlgAlarmDisplay.vue"
import {ArrowDownBold} from "@element-plus/icons-vue";
import SelectRadio from "./SelectRadio.vue";
import SelectGraphic from "./SelectGraphic.vue";

export default {
  name: "RunTest",
  props:{  },
  components:{ DlgAlarmDisplay, ArrowDownBold, SelectRadio, SelectGraphic },
  emits:[ "res" ],

  mounted() {
      window.addEventListener('storage', this.watchStorage )
  },

  unmounted() {
    window.removeEventListener('storage', this.watchStorage)
  },

  computed:{

  },
  data(){
    return{
      visibleAlarm: false ,
      

    }
  },
  watch: {

  },
  methods:{
    watchStorage( event ){
      console.log( "listen are" )
        if (event.key === 'drwedt') {
          console.log('Received message:', event.newValue);
        }
    },

    alarmdisplay(  ){
      this.visibleAlarm = true 
    },

    resAlarmDisplay(  ){
      this.visibleAlarm = false
    },

    //测试图形选择
    handle1(  ){
      this.$store.commit( "setSelectShapeIndex", 2 )
    },

  },  // end of methods

}

</script>

<style  lang="less" scoped >

// ::v-deep(.el-dialog){
//   .el-dialog__body {
//       height: 50vh; overflow: auto; padding: 0px;
//   }

//   .el-dialog__header{
//     margin: 0;
//     background-color: @dialog_header_color;
//   }

//   .el-dialog__footer {
//     background-color: @dialog_footer_color;
//   }
// }

::v-deep( tbody tr:hover > td ){
  background-color: transparent !important;
}

</style>